<template>
  <!-- 
	1.具备时输入框样式
	2.不可输入
	3.placeholder 内容可以再父组件定义
 -->
  <view class="my-search-container">
    <!-- s搜索输入框 -->
    <uni-search-bar
      v-if="isShowInput"
      class="my-search-bar"
      :radius="100"
      :bgColor="config.backgroundColor"
      :placeholder="placeholderText"
      :value="value"
      @confirm="onSearch"
      @focus="onFocus"
      @blur="onBlur"
      @clear="onClear"
      @cancel="onCancel"
      @input="onInput"
    >
      <uni-icons slot="clearIcon" type="clear" color="#999999" />
    </uni-search-bar>

    <!-- 搜索按钮 -->
    <view class="my-search-box" v-else>
      <!-- 搜索图标 -->
      <image class="icon" src="@/static/images/search.png" />
      <!-- 搜索文本 placeholder-->
      <text class="placeholder">{{ placeholderText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-search',
  props: {
    value: {
      type: String,
    },
    // 配置对象
    config: {
      type: Object,
      default: () => ({
        height: 36,
        backgroundColor: '#ffffff',
        icon: '/static/images/search.png',
        textColor: '#454545',
        border: '1px solid #c9c9c9',
      }),
    },
    isShowInput: {
      type: Boolean,
      default: false,
    },
    placeholderText: {
      type: String,
      default: '搜索',
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 点击搜索按钮触发
     */
    onSearch() {
      this.$emit('search', this.value);
      console.log('onSearch');
    },
    /**
     * 输入框获取焦点触发
     */
    onFocus() {
      this.$emit('focus', this.value);
      console.log('onFocus');
    },
    /**
     * 输入框失去焦点触发
     */
    onBlur() {
      this.$emit('blur', this.value);
      console.log('onBlur');
    },
    /**
     * 点击输入框中清空按钮
     */
    onClear() {
      this.$emit('clear', this.value);
      console.log('onClear');
    },
    /**
     * 点击取消按钮触发
     */
    onCancel() {
      this.$emit('cancel', this.value);
      console.log('onCancel');
    },
    /**
     * value 改变时触发
     */
    onInput(val) {
      console.log('onInput---' + val);
      // 通知父组件
      this.$emit('input', val);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-search-container {
  display: flex;
  align-items: center;
  .my-search-bar {
    width: 100%;
  }
  .my-search-box {
    height: 36px;
    width: 100%;
    background-color: $uni-bg-color;
    border-radius: 15px;
    border: 1px solid $uni-border-3;
    display: flex;
    align-items: center;
    padding: 0 $uni-spacing-row-base;

    .icon {
      width: $uni-img-size-sm;
      height: $uni-img-size-sm;
    }
    .placeholder {
      font-size: $uni-font-size-sm;
      margin-left: $uni-spacing-row-sm;
      color: $uni-text-color-grey;
    }
  }
}
</style>
